<script lang="ts" setup>
import type { FormInstance, UploadInstance } from 'element-plus';
import { getProcessDefinitionVOByCondition, urls, useLoginUserStore } from '@/index';
import type { flowable, DialogModelFlowable } from '@/index.d';
const dialogModel = defineModel<DialogModelFlowable>('dialogModel', { required: true });

const { fileUploadHeader } = useLoginUserStore();
const formData = reactive<flowable.ProcessDefinitionVO>({
  deploymentName: '请假流程',
  deploymentCategory: '人事业务',
  deploymentTenantId: 1
});

const setFormData = (data: flowable.ProcessDefinitionVO) => {
  formData.id = data.id;
  formData.deploymentId = data.deploymentId;
  formData.deploymentName = data.deploymentName;
  formData.deploymentCategory = data.deploymentCategory;
  formData.deploymentKey = data.deploymentKey;
  formData.deploymentTenantId = data.deploymentTenantId;
  formData.deploymentTime = data.deploymentTime;
  formData.deploymentParentDeploymentId = data.deploymentParentDeploymentId;
  formData.processDefinitionId = data.processDefinitionId;
  formData.processDefinitionKey = data.processDefinitionKey;
  formData.processDefinitionName = data.processDefinitionName;
  formData.processDefinitionCategory = data.processDefinitionCategory;
  formData.processDefinitionVersion = data.processDefinitionVersion;
  formData.processDefinitionResourceName = data.processDefinitionResourceName;
  formData.processDefinitionDiagramResourceName = data.processDefinitionDiagramResourceName;
  formData.processDefinitionDiagramResourceRaw = data.processDefinitionDiagramResourceRaw;
  formData.processDefinitionDescription = data.processDefinitionDescription;
  formData.processDefinitionIsSuspended = data.processDefinitionIsSuspended;
};

watch(
  () => dialogModel.value.id,
  async (value: string | undefined) => {
    if (value) {
      const res = (await getProcessDefinitionVOByCondition(
        'id',
        value
      )) as flowable.ProcessDefinitionVO;
      setFormData(res);
    }
  },
  {
    immediate: true
  }
);

const formRef = ref<FormInstance>();

const uploadRef = ref<UploadInstance>();

const submitUpload = () => {
  uploadRef.value!.submit();
  dialogModel.value.change = true;
};

const handlleSuccess = (response: any) => {
  const data = response.body as flowable.ProcessDefinitionVO;
  dialogModel.value.type = 'view';
  setFormData(data);
};
</script>
<template>
  <hq-dialog-detail-flowable
    v-model:dialogModel="dialogModel"
    v-if="dialogModel.visible"
    @submit="submitUpload"
  >
    <template #default>
      <el-card shadow="hover">
        <template #header>流程部署基本信息</template>
        <template #default>
          <el-form label-suffix="：" :label-width="200" ref="formRef">
            <el-row :gutter="5">
              <hq-col>
                <el-form-item label="deploymentId">
                  <el-input :value="formData.deploymentId" disabled />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="deploymentName">
                  <el-input
                    v-model="formData.deploymentName"
                    :readonly="dialogModel.type === 'view'"
                  />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="流程种类">
                  <el-select
                    placeholder="请选择流程定义种类"
                    v-model="formData.deploymentCategory"
                    clearable
                    filterable
                  >
                    <HqDeploymentCategoryOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="deploymentKey">
                  <el-input v-model="formData.deploymentKey" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="流程租户">
                  <HqCascaderDepartment
                    v-model:current="formData.deploymentTenantId"
                    :disabled="dialogModel.type === 'view'"
                  />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="deploymentTime">
                  <el-input :value="formData.deploymentTime" disabled />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="parentDeploymentId">
                  <el-input :value="formData.deploymentParentDeploymentId" disabled />
                </el-form-item>
              </hq-col>
            </el-row>
          </el-form>
        </template>
      </el-card>
      <el-card shadow="hover" v-if="formData.deploymentId">
        <template #header>流程定义基本信息</template>
        <template #default>
          <el-form label-suffix="：" :label-width="200" ref="formRef">
            <el-row :gutter="5">
              <hq-col>
                <el-form-item label="processDefinitionId">
                  <el-input :value="formData.processDefinitionId" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="processDefinitionKey">
                  <el-input :value="formData.processDefinitionKey" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="processDefinitionName">
                  <el-input :value="formData.processDefinitionName" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="processDefinitionCategory">
                  <el-input :value="formData.processDefinitionCategory" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="processDefinitionVersion">
                  <el-input :value="formData.processDefinitionVersion" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="processDefinitionDescription">
                  <el-input :value="formData.processDefinitionDescription" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="processDefinitionIsSuspended">
                  <el-input :value="formData.processDefinitionIsSuspended" readonly />
                </el-form-item>
              </hq-col>
            </el-row>
          </el-form>
        </template>
      </el-card>
      <el-card shadow="hover" v-if="dialogModel.type === 'insert' || dialogModel.type === 'update'">
        <template #header>流程定义文件（.bpmn后缀名）</template>
        <template #default>
          <el-upload
            ref="uploadRef"
            :action="`/api${urls.processDefinition}/deploy`"
            :auto-upload="false"
            :headers="fileUploadHeader"
            :data="formData"
            drag
            accept=".bpmn"
            :limit="1"
            :on-success="handlleSuccess"
          >
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
          </el-upload>
        </template>
      </el-card>

      <el-card shadow="hover" v-if="formData.processDefinitionDiagramResourceRaw">
        <template #header>流程定义图</template>
        <template #default>
          <HqBpmn :diagram-resource-raw="formData.processDefinitionDiagramResourceRaw" />
        </template>
      </el-card>
    </template>
  </hq-dialog-detail-flowable>
</template>
<style lang="scss" scoped></style>
